<template>
  <div>
      <h3>厂家主页面</h3>
      <table border="1" style="margin :0 auto;" width=500>
          <tr>
              <th>厂家编号</th>
              <th>厂家姓名</th>
              <th>公司logo</th>
              <th>厂家销量</th>
          </tr>
          <tr v-for="(item,i) in producerList" :key="i">
              <td>{{item.id}}</td>
              <td>
                  <router-link :to="{name:'Show',params:{name:item.pro_name}}">
                      {{item.pro_name}}
                  </router-link>
              </td>
              <td><img :src="host + item.logo" alt=""></td>
              <td>{{item.output}}</td>
          </tr>
          <tr>
              <td colspan="">
                  <button @click="pai">排序</button>
              </td>
          </tr>
      </table>

      <p>搜索
          <input type="text" v-model="pro_name">
          <button @click="sou">搜索</button>
      </p>

      <p>
          <table border="1" style="margin :0 auto;" width=500>
              <tr>
                  <th>商品编号</th>
                  <th>所属厂家</th>
                  <th>商品名字</th>
                  <th>口味</th>
                  <th>价格</th>
              </tr>
              <tr v-for="(item,i) in drinkList" :key="i">
                  <td>{{item.id}}</td>
                  <td>{{item.producer}}</td>
                  <td>{{item.drink_name}}</td>
                  <td>{{item.taste}}</td>
                  <td>{{item.price}}</td>
              </tr>
          </table>
      </p>
  </div>
</template>

<script>
// import {get} from '../../utils/request'
export default {
    name:'Producer',
    data(){
        return{
            producerList:[],
            drinkList:[],
            pro_name:'',
            host:"http://127.0.0.1:8000/"
        }
    },
    mounted(){
        this.GetProData();
    },
    methods:{
        GetProData(){
            this.$axios.get('pro/').then(resp=>{
                console.log(resp);
                this.producerList = resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
        pai(){
            this.$axios.get('pro/?ordering=output').then(resp=>{
                console.log(resp);
                this.producerList = resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
        sou(){
            let url = 'drink2/?search=' + this.pro_name
            this.$axios.get(url).then(resp=>{
                console.log(resp);
                this.drinkList = resp.data;
            }).catch(err=>{
                console.log(err);
            })
        }
    }

}
</script>

<style>

</style>